<script setup lang="ts">
  import { ref } from 'vue'
  const count = ref(5)
  
  const create = () => {
    parent.postMessage({ pluginMessage: { type: 'create-rectangles', count: count.value } }, '*')
  }
  
  const cancel = () => {
    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
  }
</script>

<template>
    <div class="container bg-white dark:bg-slate-900">
        <header>
            <svg-icon name="menu" size="24px" class="text-black dark:text-white" @click="create"/>
            <h1 class="text-black dark:text-white font-bold">Untitled</h1>
            <svg-icon name="setting" size="24px" class="text-black dark:text-white" @click="cancel"/>
        </header>
        <div class="chats">
            <div class="chat-item">
                <div class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-600 text-black dark:text-white">
                    <svg-icon name="ai" size="100%"/>
                </div>
                <div class="chat-content bg-slate-200/60 dark:bg-slate-600/50 rounded-lg p-2">
                    <div class="form">Ai Assistant</div>
                    <p class="text-black dark:text-white">Hello, how can I help you?</p>
                </div>
            </div>
            <div class="chat-item user">
                <div class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-600 text-black dark:text-white" />
                <div class="chat-content bg-slate-200/60 dark:bg-slate-600/50 rounded-lg p-2">
                    <div class="form">User</div>
                    <p class="text-black dark:text-white">I  need  help  with  designing  a  landing  page  for  a  new  app.</p>
                </div>
            </div>
        </div>
        <footer>
            <input type="text" v-model="count" class="w-full bg-slate-200/60 dark:bg-slate-600/50 rounded-lg p-2 text-black dark:text-white" placeholder="Enter count" />
            <div class="btn">
                <svg-icon name="picture" size="24px" class="text-black dark:text-white" />
            <svg-icon name="send" size="20px" class="text-black dark:text-white ml-2" />
            </div>
        </footer>
    </div>
</template>

<style scoped>
@reference "tailwindcss";
.container {
    width: 100%;
    height: 100%;
    padding: 60px 0 76px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    top: 0;
    h1{
        font-size: large;
    }
}
footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    .btn{
        position: absolute;
        right: 24px;
        display: flex;
        align-items: center;
    }
}
.chats{
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    gap: 16px;
    .chat-item {
        display: flex;
        margin-bottom: 16px;
        gap: 8px;
        div:first-child {
            align-self: top;
        }
        .chat-content {
            position: relative;
            flex: 1;
            @apply text-sm leading-6;
            p {
                margin: 0;
                text-align: left;
            }
            span {
                font-size: small;
            }
            .form {
                position: absolute;
                top: -20px;
                left: 0;
                font-size: small;
                @apply text-slate-500 dark:text-slate-400;
            }
        }
        &.user {
            flex-direction: row-reverse;
            .chat-content {
                @apply dark:bg-blue-600 text-white;
                text-align: right;
                .form {
                    left: unset;
                    right: 0;
                }
            }
        }
    }   
}
</style>